<div>
<style type="text/css">
  #test3-wrap {
      position: absolute;
      left: 10px;
      top: 10px;
      /*width: 210px;
      height: 210px;
      background: #CCC;*/
     /* width:375px;
      height: 667px; */
      width:250px;
      height: 445px; 
      background-color: #aaaaaa;
  }
  #test3-wrap:after {
      /*content: 'absolute';
      position: absolute;
      right: 0;
      bottom: 0;
      color: #888;
      font-size: 12px;*/
  }

  #dlq1 {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
  }

  #qrcode {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 99;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 100px;
      background: #000;
      color: #FFF;
      cursor: move;
  }
  #qrcode:after {
      /*content: 'absolute111111';
      position: absolute;
      right: 0;
      bottom: 0;
      line-height: 1em;
      text-align: left;
      color: #888;
      font-size: 12px;*/
  }


  #wxname {
      position: absolute;
      left: 0;
      top: 120px;
      z-index: 99;
      width: 100px;
      height: 30px;
      text-align: left;
      line-height: 2em;
      /*background: #000;*/
      color: #000;
      cursor: move;
  }
  #wxname:after {
      /*content: 'absolute111111';
      position: absolute;
      right: 0;
      bottom: 0;
      line-height: 1em;
      text-align: left;
      color: #888;
      font-size: 12px;*/
  }


</style>



<div class="modal-header">
    <h4 class="modal-title">设置海报</h4>
</div>
<div class="modal-body">




<div class="container-fluid" style="height: 470px;">




<div class="col-sm-4 text-center" >
  <div id="test3-wrap" >
     <!-- <div id="dlq1"> -->
     <img id="poster" ng-src="{{posterobj.share_pic}}" 
     imageonload="init()"
     ng-model="posterobj.share_pic" 
     width="100%">
     <!-- </div> -->

     <div id="qrcode" drag ng-style="qrcode">
          二维码
     </div>

     <div id="wxname" drag ng-style="wxname">
          微信名
     </div>

</div>

</div>


<div class="col-sm-8">


  <div class="row form-group">
    <label class="col-sm-2 control-label text-right">海报图片</label>
    <div class="col-sm-6">
      <input type="file" nv-file-select uploader="uploader" />
      <ul class="list-group">
          <li class="list-group-item" 
          ng-repeat="item in uploader.queue">
              文件名: <span ng-bind="item.file.name"></span>
              <button type="button" class="btn btn-default btn-xs ml10"  
              ng-click="item.upload()"><span class="glyphicon glyphicon-upload"></span> 上传</button>
              <div class="progress mt10">
                  <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
              </div>
          </li>
      </ul>
      <div class="alert alert-info ng-binding" >
          为了提高效率，省点流量，海报图片尽量压缩，大小在1M一下!<br>
          图片尺寸，推荐：<br>
          250px * 445px<br>
          500px * 890px<br>
          750px * 1335px
        </div>
    </div>
  </div>


  <div class="row form-group">
    <label class="col-sm-2 control-label text-right">图片尺寸</label>
    <div class="col-sm-6">
      宽度{{pic.w}}px , 高度{{pic.h}}px
    </div>
  </div>


  <div class="row form-group">
      <label class="col-sm-2 control-label text-right">文字颜色</label>
      <div class="col-sm-6">
        <input minicolors="customSettings" id="color-input" 
        class="form-control" type="text" ng-model="posterobj.nickname_color" placeholder="颜色">
      </div>
  </div>


  <div class="row form-group">
      <label class="col-sm-2 control-label text-right">文字最多个数</label>
      <div class="col-sm-6">
        <input class="form-control" ng-model="posterobj.nickname_length" placeholder="文字长度">
      </div>
  </div>


</div>

    

</div>
</div>

<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="gogo()">保存</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">返回</button>
</div>



</div>